<template>
<div>
  <section class="container">
    <!-- 录播图 -->
      <div v-swiper:mySwiper="swiperOption" style="margin-top: -100px;" >
      <div class="swiper-wrapper" >

        <div  class="swiper-slide" style="background: #040b1b">
          <a target="_blank" href="#">
            <img
              width="50%"
              src="../assets/img/banner.jpg"
              
            />
          </a>
        </div>
         <div  class="swiper-slide" style="background: #040b1b">
          <a target="_blank" href="#">
            <img
              width="50%"
              src="../assets/img/banner2.jpg"
              
            />
          </a>
        </div>
        <div  class="swiper-slide" style="background: #040b1b">
          <a target="_blank" href="#">
            <img
              width="70%"
              height="570px"
              src="../assets/img/banner3.jpg"
              
            />
          </a>
        </div>
      </div>
      <!-- <div class="swiper-pagination swiper-pagination-white" /> -->
      <div slot="button-prev" class="swiper-button-prev swiper-button-white" />
      <div slot="button-next" class="swiper-button-next swiper-button-white" />
    </div>

    <!-- 内容区域 -->
    
  </section>
  <div class="indexContent">
 <div class="cat">
       <div class="left">
        <div class="img">
        <img src="../assets/img/info.jpg" alt="">
      </div>
           <div class="info">
        <p class="text">勇者，从不满足现状；智者，尤擅提升自我。新一代千里马2，内外兼修，安全、美观、实用三者兼顾，全面进化，
更高品质，为了您的更高梦想,</p>
        <p class="price">参考价格：8.3-20.5万</p>
        <p><a href="">查看所有汽车信息</a></p>
        <!-- <button>汽车信息</button> -->
      </div>
     </div>

    <div class="left">
        <div class="img">
        <img src="../assets/img/info2.jpg" alt="">
      </div>
           <div class="info">
        <p class="text">
凯越科技，全方位呈现“动态舒适”驾乘科技，创领全员“动态舒适”驾乘新时代
独有的Twin-Tec引擎，Step-gate精确排档与Twin-link悬架一体联动，</p>
        <p class="price">参考价格：28-50.5万</p>
        <p><a href="">查看所有汽车信息</a></p>
        <!-- <button>汽车信息</button> -->
      </div>
     </div>

        <div class="left">
        <div class="img">
        <img src="../assets/img/info3.jpg" alt="">
      </div>
      <div class="info">
        <p class="text">别克，也在不断赋予成功以新的内涵，
从单一轿车品牌
跃升为汇聚君威、凯越、别克陆上公务舱、赛欧
等子品牌的别克母品牌
与您一起，开辟一个又一个里程碑
</p>
        <p class="price">参考价格：16.4-80万</p>
        <p><a href="">查看所有汽车信息</a></p>
        <!-- <button>汽车信息</button> -->
      </div>
     </div>

      <div class="left">
        <div class="img">
        <img src="../assets/img/info4.jpg" alt="">
      </div>
           <div class="info">
        <p class="text">凯越，为时代中坚者首创“双H”超高效和谐延展空间.
革命化的仪表盘连贯车门水平主轴（Horizontal），配合双暖色一体化内饰（Harmony）。置身其中，清晰感受空间延展，全局一手掌握。更汇聚高效空间规划，呈现自在驾乘感受――2.6米轴距座舱设置16处储物空间</p>
        <p class="price">参考价格：20.1-100万</p>
        <p><a href="">查看所有汽车信息</a></p>
        <!-- <button>汽车信息</button> -->
      </div>
     </div>
 </div>
     <div class="right">
       <div class="header">
         <h3>部分预约车友</h3>
       </div>
       <div>
         <table>
           <thead>
             <th>姓名</th>
             <th>手机号</th>
             <th>车型</th>
             <th>时间</th>
           </thead>
           <tbody>
           <tr>
             <td>刘**</td>
             <td>151****1456</td>
             <td>千里马2</td>
             <td>三小时前</td>
           </tr>
            <tr>
             <td>李**</td>
             <td>198****256</td>
             <td>千里马</td>
             <td>四小时前</td>
           </tr>
            <tr>
             <td>王**</td>
             <td>138****78555</td>
             <td>宝马X5</td>
             <td>三小时前</td>
           </tr>
            <tr>
             <td>柳**</td>
             <td>137****1028</td>
             <td>奔驰</td>
             <td>三小时前</td>
           </tr>
            <tr>
             <td>杨**</td>
             <td>188****1456</td>
             <td>奔驰</td>
             <td>三小时前</td>
           </tr>
            <tr>
             <td>邵**</td>
             <td>151****9695</td>
             <td>别克</td>
             <td>三小时前</td>
           </tr>
           <tr>
             <td>梁**</td>
             <td>198****555</td>
             <td>宝马</td>
             <td>三小时前</td>
           </tr>
         
         </tbody>
         </table>
         
       </div>
     </div>
    </div>


    </div>
</template>

<script>
import AppLogo from '~/components/AppLogo.vue'

export default {
  components: {
    AppLogo
  },
    data() {
    return {
      swiperOption: {
        // 配置分页
        pagination: {
          el: ".swiper-pagination", // 分页的dom节点
        },
        // 配置导航
        navigation: {
          nextEl: ".swiper-button-next", // 下一页dom节点
          prevEl: ".swiper-button-prev", // 前一页dom节点
        },
        //自动轮播
        autoplay: {
          delay: 2000,
        },
        //开启循环模式
        loop: true,
        //开启鼠标滚轮控制Swiper切换
        //mousewheel: true
      },
    };
  },
}
</script>

<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

